<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/homeIndex' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>套餐列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <!--    弹出的修改套餐的表格-->
    <el-dialog title="修改套餐" :visible.sync="dialogVisible">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="editForm.name" type="text"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="updateForm('editForm')">修改套餐</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-card style="float: left ;width: 500px;height: 100%;margin: 10px">
      <el-divider content-position="left">套餐表格</el-divider>
      <el-button icon="el-icon-edit" type="warning" @click="openAddNewDialog()">添加套餐</el-button>

      <!--弹出的新增套餐的表格-->
      <el-dialog title="新增套餐" :visible.sync="addNewFormVisible">
        <el-form :model="addNewForm" :rules="rules" ref="addNewForm">
          <el-form-item label="套餐名称" prop="name" :label-width="formLabelWidth">
            <el-input v-model="addNewForm.name"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="warning" @click="addNewsubmitForm('addNewForm')">新增套餐</el-button>
          <el-button @click="addNewFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!--  套餐表格  -->

      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :data="foodPackageArr"
      >
        <!--  套餐数组：表格  food_package_link-->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column label="套餐名称" width="150" align="center">
          <template slot-scope="scope">
            <!-- //按钮 点击名称显示菜单 -->
            <el-button
              type="danger"
              round
              @click="openFoodPackageInfo(scope.row.id)"
            >{{scope.row.name}}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <!--自定义列必须添加template标签 以及slot-scope="scope"
          scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
          scope.$index当前行对应的数组下标
          scope.row当前行对应的数组里面的对象
          -->
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="openEditDialog(scope.row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-delete"
              @click="openDeleteConfirm(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin: 0 auto">
        <el-pagination
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!--弹出的新增套餐餐品关联的表格-->
    <el-dialog title="新增套餐餐品关联" :visible.sync="addNewFormLinkVisible">
      <el-form :model="addNewLinkForm" :rules="rules" ref="addNewLinkForm">
        <el-form-item label="餐品选择" prop="foodId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodId">
            <el-option v-for="c in foodArr" :key="c.id" :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodPackageId">
            <el-option v-for="c in foodPackageArr2" :key="c.id" :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间选择" prop="meal" :label-width="formLabelWidth">
          <el-select v-model="addNewLinkForm.meal" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="warning" @click="addNewsubmitLinkForm('addNewLinkForm')">新增套餐餐品关联</el-button>
        <el-button @click="addNewFormLinkVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--  套餐餐品关联表格  -->

    <el-card style="float: left ;width: 1000px;height: 100%;margin: 10px">
      <el-divider content-position="left">套餐餐品表格</el-divider>
      <!-- 添加搜索条件 -->
      <div style="margin-bottom: 10px;">
        <el-form :inline="true">
          <el-form-item label="查询套餐">
            <el-select placeholder="查询套餐" v-model="orderParam.foodPackageId">
              <el-option v-for="c in foodPackageArr2" :key="c.id" :label="c.name" :value="c.id"></el-option>>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clear">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadFoodPackageLinkList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button icon="el-icon-edit" type="warning" @click="openAddNewLinkDialog()">添加套餐餐品</el-button>
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :data="foodPackageLinkArr"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="foodPackageName" label="套餐名称"></el-table-column>
        <el-table-column prop="foodName" label="餐品名称"></el-table-column>
        <el-table-column prop="price" label="餐品价格"></el-table-column>
        <el-table-column label="餐品图片">
          <!--如果表格的列显示的内容不是来自于数组里面对象的属性,而是显示一些
          其它的标签组成的内容时,需要自定义列-->
          <!--自定义列 必须添加template标签-->

          <template slot-scope="scope">
            <img :src="scope.row.foodUrl" style="width:55%" size="50" />
            <!-- <img :src="require('../../../assets/food/' +scope.row.foodUrl)" width="50" /> -->
          </template>
        </el-table-column>
        <el-table-column prop="foodPackageLinkMeal" label="餐品种类"></el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="warning" @click="openEditLinkDialog(scope.row.id)">编辑</el-button> -->
            <el-button
              size="mini"
              type="info"
              icon="el-icon-delete"
              @click="openDeleteLinkConfirm(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style>
        <el-pagination
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize2"
          :current-page="pageNum2"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage2"
          @prev-click="prevPage2"
          @size-change="sizeChange2"
          @current-change="currentPage2"
          :total="total2"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 弹出的修改套餐餐品关联的表单

    <el-dialog title="修改套餐餐品关联" :visible.sync="dialogLinkVisible">
      <el-form :model="addNewLinkForm" :rules="rules" ref="addNewLinkForm">
        <el-form-item label="餐品选择" prop="foodId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodId">
            <el-option v-for="c in foodArr" :key="c.id" :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodPackageId">
            <el-option v-for="c in foodPackageArr2" :key="c.id" :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间选择" prop="meal" :label-width="formLabelWidth">
          <el-select v-model="editLinkForm.meal" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="updateLinkForm('editLinkForm')">修改关联</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>-->
    <!-- //套餐名称表里面的点击套餐的显示列表 -->
    <el-dialog title="套餐信息" :visible.sync="foodPackageInfoVisible">
      <el-row gutter="15" style="text-align: center">
        <el-col span="8" v-for="(item, index) in foodPackageInfo" :key="index">
          <div style="width: 230px; text-align: center; margin-bottom: 30px">
            <img
              :src="item.foodUrl"
              style="border-radius: 50%;margin: 0 auto;border-color: #E6A23C;border-style: solid;border-width: 3px"
              width="100"
              height="100"
            />
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.foodName}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #bdbcb1">价格(元):{{item.foodPrice}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.meal}}</p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FoodPackageListView",
  data: function() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      pageNum2: 1,
      pageSize2: 5,
      total2: 0,
      foodPackageArr2: [],
      foodPackageInfoVisible: false,
      editLinkForm: "",
      foodPackageInfo: [],
      foodPackageArr: [],
      foodArr: [],
      foodPackageLinkArr: [],
      editForm: [],
      addNewFormVisible: false,
      addNewFormLinkVisible: false,
      dialogLinkVisible: false,
      addNewLinkForm: {},
      orderParam: {
        foodPackageId: ""
      },
      options: [
        { value: "早餐", label: "早餐" },
        { value: "午餐", label: "午餐" },
        { value: "晚餐", label: "晚餐" }
      ],

      addNewForm: { name: "" },
      formLabelWidth: "120px",
      rules: {
        name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
        foodId: [
          { required: true, message: "请输入食物名称", trigger: "blur" }
        ],
        foodPackageId: [
          { required: true, message: "请输入套餐名称", trigger: "blur" }
        ],
        meal: [
          { required: true, message: "请输入餐品使用时间", trigger: "blur" }
        ]
      },
      dialogVisible: false
    };
  },
  methods: {
    clear() {
      this.orderParam.foodPackageId = "";
    },
    //分页1
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.loadFoodPackageList();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.loadFoodPackageList();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.loadFoodPackageList();
    },
    currentPage(val) {
      this.pageNum = val;
      this.loadFoodPackageList();
    },
    queryCondition() {
      this.pageNum = 1;
      this.loadFoodPackageList();
    },
    //分页2
    prevPage2(val) {
      //点击上一页触发
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    nextPage2(val) {
      //点击下一页触发
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    sizeChange2(val) {
      //val每一页条数
      this.pageNum2 = 1;
      this.pageSize2 = val;
      this.loadFoodPackageLinkList();
    },
    currentPage2(val) {
      this.pageNum2 = val;
      this.loadFoodPackageLinkList();
    },
    queryCondition2() {
      this.pageNum2 = 1;
      this.loadFoodPackageLinkList();
    },
    //对应套餐数据：food_package 显示套餐包里面数据 表格图片
    //foodPackage.id; link表 根据food-Package-id查

    openFoodPackageInfo(val) {
      this.foodPackageInfoVisible = true;

      this.$axios.get("api/foodPackage/queryByPackageId/" + val).then(res => {
        if (res.data.code == 200) {
          const originalForm = res.data.data;
          this.foodPackageInfo = originalForm;
        }
      });
    },

    openDeleteLinkConfirm(val) {
      let message = "此操作将永久删除";
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.handleDeleteLink(val);
        })
        .catch(() => {});
    },
    //已关联 套餐餐品表格的操作 编辑案件，editLinkForm
    //打开编辑页面 并根据foodPackageLink.id 查询数据
    openEditLinkDialog(val) {
      this.dialogLinkVisible = true;
      this.$axios.get("api/foodPackage/queryByLinkid/" + val).then(res => {
        if (res.data.code == 200) {
          const originalForm = res.data.data;
          this.editLinkForm = originalForm;
        }
      });
    },
    //删除套餐关联表格的数据按钮  foodPackageLink.id  this.loadFoodPackageLinkList();
    handleDeleteLink(val) {
      //餐品删除方法
      console.log(val); // 在这里打印val
      this.$confirm("再次确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.get("api/foodLink/deleteFoodLink/" + val).then(res => {
          if (res.data.code == 200) {
            //发删除请求
            this.$message.success("删除成功!");
            this.loadFoodPackageLinkList();
            this.loadFoodPackageList2();
          }
        });
      });
    },

    addNewsubmitLinkForm(formName) {
      // 已关联 addNewLinkForm 新增套餐餐品关联 弹出来的添加套餐餐品页面的 新增关联按钮
      // this.loadFoodPackageLinkList(); this.resetForm(formName);
      //  this.addNewFormLinkVisible = false;
      // 验证必填项
      console.log(this.addNewLinkForm);
      if (
        !this.addNewLinkForm.foodPackageId ||
        !this.addNewLinkForm.foodId ||
        !this.addNewLinkForm.meal
      ) {
        this.$message.error("请填写所有必填项！");
        return;
      }
      let Food = this.addNewLinkForm;
      this.$axios.post("api/foodLink/addFoodLink", Food).then(res => {
        if (res.data.code == 200) {
          this.$message.success("提交成功!");
          this.loadFoodPackageLinkList();
          this.resetForm(formName);
          this.addNewFormLinkVisible = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //已关联 加载所有FOOD的列表 foodArr 不分页
    loadFoodList() {
      this.$axios.get("api/food/queryFoodList").then(res => {
        if (res.data.code == 200) {
          this.foodArr = res.data.data;
        }
      });
    },
    //已关联 加载所有foodPackage的列表 foodArr 不分页
    loadFoodPackageList2() {
      this.$axios.get("api/foodPackage/queryFoodPackageList").then(res => {
        if (res.data.code == 200) {
          this.foodPackageArr2 = res.data.data;
        }
      });
    },
    //跳添加套餐餐品的弹窗
    openAddNewLinkDialog() {
      this.addNewFormLinkVisible = true;
    },
    // 修改列表套餐，弹窗里面的编辑的按钮 editForm
    //  this.loadFoodPackageList();
    // this.dialogVisible = false;

    updateForm() {
      // 验证必填项
      if (!this.editForm.name) {
        this.$message.error("请填写所有必填项！");
        return;
      }
      let Food = this.editForm;
      this.$axios.post("api/foodPackage/updateFoodPackage", Food).then(res => {
        if (res.data.code == 200) {
          this.loadFoodPackageList();
          this.dialogVisible = false;
          this.$message({ message: "修改餐品成功！", type: "success" });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    //套餐表格 操作  点击编辑 查询ID并打开页面 editForm
    openEditDialog(val) {
      this.dialogVisible = true;
      this.$axios.get("api/foodPackage/queryByPackageId/" + val).then(res => {
        if (res.data.code == 200) {
          const originalForm = res.data.data;
          this.editForm = originalForm;
        }
      });
    },
    //删除套餐表格 里面的套餐开始
    openDeleteConfirm(val) {
      let message = "此操作将永久删除套餐，是否继续？";
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.handleDelete(val);
        })
        .catch(() => {});
    },
    //已关联 删除套餐表格 里面的套餐 foodPackage.id
    handleDelete(val) {
      console.log(val); // 在这里打印val
      this.$confirm("真的确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios
          .get("api/foodPackage/deletefoodPackage/" + val)
          .then(res => {
            if (res.data.code == 200) {
              //发删除请求
              this.$message.success("删除成功!");
              this.loadFoodPackageList();
              this.loadFoodPackageList2();
            }
          });
      });
    },
    //已关联 添加套餐弹窗 的添加套餐方法 对应 addNewForm
    //this.resetForm(formName);
    //this.addNewFormVisible = false;
    // this.loadFoodPackageList();
    addNewsubmitForm(formName) {
      // 验证必填项
      if (!this.addNewForm.name) {
        this.$message.error("请填写所有必填项！");
        return;
      }
      let Food = this.addNewForm;
      this.$axios.post("api/foodPackage/addFoodPackage", Food).then(res => {
        if (res.data.code == 200) {
          this.$message.success("提交成功!");
          this.resetForm(formName);
          this.addNewFormVisible = false;
          this.loadFoodPackageList();
          this.loadFoodPackageList2();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //套餐表格下，添加套餐，弹窗添加套餐,
    openAddNewDialog() {
      this.addNewFormVisible = true;
    },
    //已关联 套餐表格 等 ，分页展示所有套餐的方法 this.foodPackageArr = responseBody.data.list;
    loadFoodPackageList() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;

      this.$axios
        .post("api/foodPackage/queryFoodPackage", pageParam)
        .then(res => {
          if (res.data.code == 200) {
            let pageData = res.data.data;

            this.foodPackageArr = pageData.list;
            console.log("1" + this.foodPackageArr);
            //给分页参数赋值
            this.total = pageData.total;
            this.pageNum = pageData.pageNum;
            this.pageSize = pageData.pageSize;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //套餐餐品表格展示.关系展示，需要分页 foodPackageLinkArr
    loadFoodPackageLinkList() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum2;
      pageParam.pageSize = this.pageSize2;
      pageParam.param = this.orderParam;

      this.$axios.post("api/foodLink/queryFoodLink", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;

          this.foodPackageLinkArr = pageData.list;
          console.log(this.foodPackageLinkArr);

          //给分页参数赋值
          this.total2 = pageData.total;
          this.pageNum2 = pageData.pageNum;
          this.pageSize2 = pageData.pageSize;
        }
      });
    }
  },
  mounted() {
    this.loadFoodPackageList();
    this.loadFoodPackageLinkList();
    this.loadFoodList();
    this.loadFoodPackageList2();
  }
};
</script>

<style>
.el-table th.el-table__cell > .cell {
  /* display: inline-block; */
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
}
</style>